<template>
    <div style="width:300px; border:1px solid black">
        <ElForm ref="form" :model="formData" label-suffix="：" :rules="rules" label-position="right" label-width="100px">
            <ElFormItem label="文本" prop="text">
                <ElInput v-model="formData.text" />
            </ElFormItem>
        </ElForm>
        <ElButton @click="submitForm">提交</ElButton>
    </div>
</template>
<script lang="ts">
import { ElForm, ElFormItem, ElInput, ElButton } from "element-plus";
import { defineComponent, ref } from "vue";
export default defineComponent({
    setup(){
        const form = ref<InstanceType<typeof ElForm>>();
        return {
            form
        };
    },
    data() {
        return {
            formData: {
                text: ""
            },
            rules: {
                text: [{ required: true, message: "文本框必填", trigger: 'blur' }]
            }
        };
    },
    components: { ElForm, ElFormItem, ElInput, ElButton },
    methods: {
        submitForm() {
            this.form?.validate()?.then(function (a) {
                alert(a);
            }, function (b) {
                alert(b)
            });
        }
    }
});
</script>

